<template>
    <div class="list">
        商品列表页
        <!-- 点击事件  -->
        <!-- <div @click=""></div> -->
        <!-- 自定义事件 $emit("click") -->
        <van-tabs v-model="active"  @click="print" >
            <van-tab v-for="item in navData" :name="item.name" :title="item.name"></van-tab>
            
        </van-tabs>
        <ul>
            <router-link :to="`/category/list/info/${item.id}`" tag="li" v-for="item in list" :key="item.id">
                <img :src="item.list_pic_url" alt="">
                <h2>{{ item.name }}</h2>
            </router-link>
        </ul>
    </div>
</template>

<script>
import {
    categoryNav,
    goodsList
} from "@/api/category/list"
export default {
    data() {
        return {
            navData:[],
            active:"床垫",
            list:[]
        };
    },
    computed: {

    },
    created() {
        var id = this.$route.query.id;
        categoryNav({
            id
        })
        .then(res =>{
            
            this.navData = res.navData;
            this.active = res.currentNav.name;
        })
        goodsList({
            categoryId:id
        })
        .then(res =>{
            console.log(res)
            this.list = res.data
        })
    },
    mounted() {

    },
    methods: {
        print(val,val1){
            console.log(val,val1)
            var id = this.navData.find(ele =>ele.name == val).id;
            goodsList({
                categoryId:id
            })
            .then(res =>{
                console.log(res)
                this.list = res.data
            })
        }
    },
};
</script>

<style scoped lang="scss">
.list{
    ul{
        li{
            img{
                width: 50%;
            }
        }
    }
}
</style>
